<template>
  <div ref="editor" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import WangEditor from 'wangeditor'
import { uploadCourseImage } from '/@/services/Course'
export default defineComponent({
  name: 'TextEditor',
  props: {
    text: {
      type: String,
      default: ''
    }
  },
  components: {},
  setup(props: any, context: any) {
    const editor = ref()
    const init = ref(() => {
      const wangEditor = new WangEditor(editor.value as any)
      wangEditor.config.onchange = (value: string) => {
        context.emit('update:text', value)
      }
      wangEditor.create()
      wangEditor.txt.html(props.text)
      wangEditor.config.customUploadImg = async (resultFiles: any, insertImgFn: any) => {
        const fd = new FormData()
        fd.append('file', resultFiles[0])
        const { data } = await uploadCourseImage(fd)
        insertImgFn(data.data.name)
      }
    })
    return {
      init,
      editor
    }
  },
  mounted() {
    this.init()
  }
})
</script>
<style lang="scss" scoped></style>
